<template>
	<view class="">
		<view class="tab-box">
			<uv-sticky bgColor="#fff">
				<uv-tabs :list="tablist" lineWidth="30" @click="change" :scrollable="false" lineColor="#01E305"
					:activeStyle="{
					color:'#01E305'
				}"></uv-tabs>
			</uv-sticky>
		</view>
		<view class="content">
			<view class="title-box d-flex justify-space-between align-center mt-2">
				<view class="font-18 font-bold"><text>{{tabcurrent==5 ? '分销商数据' : '数据总览'}}</text></view>
				<view class="title-box-right d-flex">
					<view class="title-box-right-item" @click="toggleDate(index)" v-for="(m , index) in dates"
						:key="index+'d'" :class="datecurrent==index ? 'dateactive' : ''">
						<text>{{m.name}}</text>
					</view>
					<view class="date-timepick" v-if="tabcurrent==2 || tabcurrent==3|| tabcurrent==4 || tabcurrent==5">
						<view class="top" @click="handTimeTop">
							<text>{{timetop}}</text>
						</view>
						<view class="bottom" @click="handTimeBottom">
							<text>{{timebottom}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 总览 -->
			<view v-if="tabcurrent == 1">
				<view class="data-card mt-4 d-flex u-flex-wrap justify-space-between">
					<view class="data-card-item mb-4" v-for="(item , index) in cartdata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>{{item.com}}</text>
						</view>
					</view>
				</view>
				<view class="data-card d-flex mt-4 align-center">
					<view class="data-card-left text-center mr-6">
						<image src="../../static/dataImages/trophy-gold.png" mode=""></image>
						<view class="font-16 font-bold"><text>号卡畅销榜</text></view>
						<view class="data-card-left-tab d-flex mt-2">
							<view :class="daycurrent == 0 ? 'active' :''" @click="toggleDay(1 , 0)"><text>昨日</text>
							</view>
							<view :class="daycurrent == 1 ? 'active' :''" @click="toggleDay(1 , 1)"><text>今日</text>
							</view>
						</view>
					</view>
					<view class="data-card-right mt-2">
						<view class="data-card-right-item">
							<text class="mr-2 cD3312F">no.1</text>
							<text class="font-14 font-bold">{{hkGoods[0].name}}</text>
						</view>
						<view class="data-card-right-item">
							<text class="mr-2 cF8B437">no.2</text>
							<text class="font-14 font-bold">{{hkGoods[1].name}}</text>
						</view>
						<view class="data-card-right-item">
							<text class="mr-2 cF8B437">no.3</text>
							<text class="font-14 font-bold">{{hkGoods[2].name}}</text>
						</view>
					</view>
				</view>
				<view class="data-card d-flex mt-4 align-center">
					<view class="data-card-left text-center mr-6">
						<image src="../../static/dataImages/trophy-silver.png" mode=""></image>
						<view class="font-16 font-bold"><text>地区办理榜</text></view>
						<view class="data-card-left-tab d-flex mt-2">
							<view :class="daycurrents == 0 ? 'active' :''" @click="toggleDay(2 , 0)"><text>昨日</text>
							</view>
							<view :class="daycurrents == 1 ? 'active' :''" @click="toggleDay(2 , 1)"><text>今日</text>
							</view>
						</view>
					</view>
					<view class="data-card-right mt-2">
						<view class="data-card-right-item">
							<text class="mr-2 cD3312F">no.1</text>
							<text class="font-14 font-bold">{{cityGoods[0].name}}</text>
						</view>
						<view class="data-card-right-item">
							<text class="mr-2 cF8B437">no.2</text>
							<text class="font-14 font-bold">{{cityGoods[1].name}}</text>
						</view>
						<view class="data-card-right-item">
							<text class="mr-2 cF8B437">no.3</text>
							<text class="font-14 font-bold">{{cityGoods[2].name}}</text>
						</view>
					</view>
				</view>
				<view class="data-card d-flex mt-4 align-center">
					<view class="data-card-left text-center mr-6">
						<view class="font-16 font-bold"><text>最佳分销商</text></view>
					</view>
					<view class="data-card-right mt-2">
						<view class="data-card-right-item">
							<text class="mr-2 cF8B437">no.1</text>
							<text class="font-14 font-bold">{{goodsComm}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单 -->
			<view v-if="tabcurrent == 2">
				<view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>订单变化统计</text></view>
					<qiun-data-charts type="area" :opts="opts" :chartData="chartDataOrder" />
				</view>
				<view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>订单状态变化数据</text></view>
					<qiun-data-charts type="area" :opts="opts" :chartData="chartDataOrderStatus" />
				</view>
			</view>
			<!-- 商品 -->
			<view v-if="tabcurrent == 3">
				<view class="data-card mt-4 d-flex u-flex-wrap justify-space-between">
					<view class="data-card-item mb-4" v-for="(item , index) in goodalldata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>个</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>

						</view>
					</view>
				</view>
				<view class="data-card mt-4 d-flex u-flex-wrap ">
					<view class="data-card-item mb-4 " :class="(index+1)%3==0 ? '' : 'mr-4'"
						v-for="(item , index) in goodtypedata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>个</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>

						</view>
					</view>
				</view>
				<!-- <view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>商品活跃变化数据</text></view>
					<qiun-data-charts type="column" :opts="zhuopts" :chartData="zhuchartData" />
				</view> -->
				<view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>活跃商品销量统计</text></view>
					<view class="table-box mt-2">
						<view class="tr d-flex">
							<view class="td">
								<text>商品名称</text>
							</view>
							<view class="td">
								<text>销量</text>
							</view>
							<view class="td">
								<text>订单来源</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 佣金 -->
			<view v-if="tabcurrent == 4">
				<view class="data-card mt-4 d-flex u-flex-wrap ">
					<view class="data-card-item mb-4 " :class="(index+1)%3==0 ? '' : 'mr-4'"
						v-for="(item , index) in yongjindata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>元</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>

						</view>
					</view>
				</view>
				<view class="data-card mt-4 d-flex u-flex-wrap ">
					<view class="data-card-item mb-4 " :class="(index+1)%3==0 ? '' : 'mr-4'"
						v-for="(item , index) in yongjintypedata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>元</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>

						</view>
					</view>
				</view>
				<!-- <view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>佣金占比数据</text></view>
					<qiun-data-charts type="ring" :opts="bingopts" :chartData="bingchartData" />
				</view>
				<view class="data-card  mt-4 align-center">
					<view class="font-16 font-bold"><text>今日佣金统计</text></view>
					<view class="d-flex mt-2">
						<view class="yongjin-item d-flex flex-column">
							<text class="mb-3">来源</text>
							<text>自营推广</text>
						</view>
						<view class="yongjin-item  d-flex flex-column">
							<text class="mb-3">金额</text>
							<text>0元</text>
						</view>
						
					</view>
				</view> -->
			</view>
			<!-- 分销 -->
			<view v-if="tabcurrent == 5">
				<view class="data-card mt-4 d-flex u-flex-wrap justify-space-between">
					<view class="data-card-item"
						v-for="(item , index) in fenxiaodata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>位</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>
				
						</view>
					</view>
				</view>
				<view class="data-card mt-4 d-flex u-flex-wrap ">
					<view class="data-card-item mb-4 " :class="(index+1)%3==0 ? '' : 'mr-4'"
						v-for="(item , index) in fenxiaoorderdata" :key="index">
						<view class="c69"><text>{{item.name}}</text></view>
						<view class="data-card-item-bottom d-flex align-center" v-if="item.price != 0">
							<view class="font-18 font-bold mr-2"><text>{{item.price}}</text></view>
							<text>单</text>
						</view>
						<view class="font-14 font-bold data-card-item-bottom d-flex align-center" v-else>
							<view class="font-18 font-bold mr-2"><text>暂无订单</text></view>
				
						</view>
					</view>
				</view>
				<!-- <view class="data-card mt-4 d-flex u-flex-wrap">
					<view class="font-16 font-bold"><text>分销商数据</text></view>
					<qiun-data-charts type="area" :opts="optsfenxiao" :chartData="fenxiaochartData" />
				</view> -->
			</view>
			<uv-calendars ref="calendarstop" @confirm="confirmtop" />
			<uv-calendars ref="calendarsbottom" @confirm="confirmbottom" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				tabcurrent: 1,
				tablist: [{
					id: 1,
					name: '总览',
					disabled: false
				}, {
					id: 2,
					name: '订单',
					disabled: false
				}, {
					id: 3,
					name: '商品',
					disabled: false
				}, {
					id: 4,
					name: '佣金',
					disabled: false
				}, {
					id: 5,
					name: '分销',
					disabled: false
				}],
				datecurrent: 0,
				dates: [{
						name: '今日',
						index: 1
					},
					{
						name: '本周',
						index: 2
					},
					{
						name: '本月',
						index: 3
					}
				],
				cartdata: [{
						name: '今日结算佣金',
						price: 0,
						com:'元'
					},
					{
						name: '今日订单量',
						price: 0,
						com:'单'
					},
					{
						name: '我的分销商',
						price: 0,
						com:'位',
					},
					{
						name: '自营佣金',
						price: 0,
						com:'元'
					},
					{
						name: '自营订单',
						price: 0,
						com:'单'
					},
					{
						name: '活跃分销商',
						price: 0,
						com:'位'
					},
					{
						name: '分销佣金',
						price: 0,
						com:'元'
					},
					{
						name: '分销商订单',
						price: 0,
						com:'单'
					},
					{
						name: '今日新增',
						price: 0,
						com:'位'
					},
				],
				// 商品类型
				goodalldata: [{
						name: '所有商品',
						price: 0
					},
					{
						name: '今日活跃商品',
						price: 0
					},
					{
						name: '今日最高销量',
						price: 0
					},
				],
				goodtypedata: [{
						name: '中国移动',
						price: 0
					},
					{
						name: '中国联通',
						price: 0
					},
					{
						name: '中国电信',
						price: 0
					},
					{
						name: '中国广电',
						price: 0
					},
					{
						name: '中国广电',
						price: 0
					}
				],
				// 佣金
				yongjindata: [{
						name: '我的佣金',
						price: 0
					},
					{
						name: '今日佣金',
						price: 0
					},

				],
				yongjintypedata: [{
						name: '自营佣金',
						price: 0
					},
					{
						name: '分销商佣金',
						price: 0
					},
					// {
					// 	name: '今日活动奖励',
					// 	price: 12
					// },
					// {
					// 	name: '今日自营结算佣金',
					// 	price: 12
					// },
					// {
					// 	name: '今日分销商结算佣金',
					// 	price: 12
					// },


				],
				// 分销
				fenxiaodata:[
					{
						name: '我的分销商',
						price: 0
					},
					{
						name: '今日新增分销商',
						price: 0
					},
					{
						name: '活跃分销商',
						price: 0
					},
				],
				fenxiaoorderdata:[
					{
						name: '分销商总订单',
						price: 0
					},
					{
						name: '订单量最多',
						price: 0
					},
					{
						name: '发货量最多',
						price: 0
					},
					{
						name: '激活量最多',
						price: 0
					},
					{
						name: '结算量最多',
						price: 0
					},
					
				],
				daycurrent: 0,
				daycurrents: 0,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				chartDataOrder: {},
				chartDataOrderStatus: {},
				timetop: '时间',
				timebottom: '时间',
				zhuopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				zhuchartData: {},
				bingopts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "佣金",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "100",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				bingchartData: {},
				// 分销商echarts数据
				optsfenxiao:{
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				fenxiaochartData:{},
				hkGoods:[
					{name:'暂无数据'},
					{name:'暂无数据'},
					{name:'暂无数据'},
				],
				cityGoods:[
					{name:'暂无数据'},
					{name:'暂无数据'},
					{name:'暂无数据'},
				],
				goodsComm:'暂无数据'
			}
		},
		onReady() {
			this.init();
			this.initTwo();
			this.initTh();
			this.initFo();
			// this.getServerData();
			// this.getbingData();
			// this.getfenxiaoData();
		},
		methods: {
			change(item, index) {
				this.tabcurrent = item.id
				if(item.id == 2){
					// 订单
					this.initOrder();
				}
				if(item.id == 3){
					// 订单
					this.initGoods();
				}
				if(item.id == 4){
					// 订单
					this.initCommission();
				}
				if(item.id == 5){
					// 订单
					this.initCommissionDist();
				}
				console.log(item, index);
			},
			toggleDate(index) {
				this.datecurrent = index
				
			},
			toggleDay(type, index) {
				if (type == 1) {
					this.daycurrent = index
				} else {
					this.daycurrents = index
				}
			},
			init() {
				uni.$uv.http.post('/cash/overview').then(res => {
					console.log(res,111111111);
					this.cartdata[0].price = res.data.commissionTotle;
					this.cartdata[1].price = res.data.orderTotle;
					this.cartdata[2].price = res.data.commisTotle;
					this.cartdata[3].price = res.data.moneyTotleSelf;
					this.cartdata[4].price = res.data.orderTotleSelf;
					this.cartdata[5].price = res.data.commissTotle;
					this.cartdata[6].price = res.data.moneyTotleNoSelf;
					this.cartdata[7].price = res.data.orderTotleNoSelf;
					this.cartdata[8].price = res.data.commisTotleDays;
					// this.bannerlist = this.makeServerPicUrl(res.data.swiper || '', 'pic');
				}).catch(e => {
					console.log(e)
				})
			},
			initTwo() {
				uni.$uv.http.post('/cash/hkbbestSell').then(res => {
					console.log(res,111111111);
					this.hkGoods = res.data;
				}).catch(e => {
					console.log(e)
				})
			},
			initTh() {
				uni.$uv.http.post('/cash/citybestSell').then(res => {
					console.log(res,111111111);
					this.cityGoods = res.data;
				}).catch(e => {
					console.log(e)
				})
			},
			initFo() {
				uni.$uv.http.post('/cash/commbestSell').then(res => {
					console.log(res,111111111);
					this.goodsComm = res.data.shop_str;
				}).catch(e => {
					console.log(e)
				})
			},
			initOrder() {
				uni.$uv.http.post('/cash/order/statist',{type:1}).then(res => {
					// console.log(res,111111111);
					let ress = {
						categories: res.data.time,
						series: [{
								name: "自营",
								data: res.data.order.selfTotle
							},
							{
								name: "分销",
								data: res.data.order.selfNoTotle
							},
							{
								name: "总订单",
								data: res.data.order.totle
							}
						]
					};
					this.chartDataOrder = JSON.parse(JSON.stringify(ress));
					let resss = {
						categories: res.data.time,
						series: [{
								name: "开卡中",
								data: res.data.order.selfTotle
							},
							{
								name: "已发货",
								data: res.data.order.selfNoTotle
							},
							{
								name: "已激活",
								data: res.data.order.totle
							},
							{
								name: "已结算",
								data: res.data.order.totle
							},
							{
								name: "已被拦截",
								data: res.data.order.totle
							},
							{
								name: "已失败",
								data: res.data.order.totle
							}
						]
					};
					this.chartDataOrderStatus = JSON.parse(JSON.stringify(resss));
					// this.goodsComm = res.data.shop_str;
				}).catch(e => {
					console.log(e)
				})
			},
			initGoods(){
				uni.$uv.http.post('/cash/goodsStatist').then(res => {
					console.log(res,111111111);
					this.goodalldata[0].price = res.data.totle;
					this.goodalldata[1].price = res.data.totles;
					// this.goodsComm = res.data.shop_str;
				}).catch(e => {
					console.log(e)
				})
			},
			initCommission(){
				uni.$uv.http.post('/cash/commission').then(res => {
					console.log(res,111111111);
					this.yongjindata[0].price=res.data.totle;
					this.yongjindata[1].price=res.data.totleDays;
					this.yongjintypedata[0].price = res.data.selfTotle;
					this.yongjintypedata[1].price = res.data.selfNoTotle;
					// this.goodalldata[0].price = res.data.totle;
					// this.goodalldata[1].price = res.data.totles;
					// this.goodsComm = res.data.shop_str;
				}).catch(e => {
					console.log(e)
				})
			},
			initCommissionDist(){
				uni.$uv.http.post('/cash/commissionDist').then(res => {
					console.log(res,111111111);
					// this.goodalldata[0].price = res.data.totle;
					// this.goodalldata[1].price = res.data.totles;
					// this.goodsComm = res.data.shop_str;
				}).catch(e => {
					console.log(e)
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "总商品",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "活跃商品",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.zhuchartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getbingData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "分销商佣金",
								"value": 70
							}, {
								"name": "自营佣金",
								"value": 30
							}]
						}]
					};
					this.bingchartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getfenxiaoData(){
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "新增分销商",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "分销商总数",
								data: [70, 40, 65, 100, 44, 68]
							},
						]
					};
					this.fenxiaochartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			confirmtop(e) {
				console.log(e)
				this.timetop = e.fulldate
			},
			confirmbottom(e) {
				console.log(e)
				this.timebottom = e.fulldate
			},
			handTimeTop() {
				console.log(655455);
				this.$refs.calendarstop.open();
			},
			handTimeBottom() {
				this.$refs.calendarsbottom.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.tab-box {
		width: 100%;
		height: 100rpx;
	}

	.title-box-right {
		.title-box-right-item {
			display: flex;
			align-items: center;
		}

		.date-timepick {
			padding: 0 25rpx;
		}

		.top {
			padding-bottom: 4rpx;
			border-bottom: 1px solid;
		}
	}

	.title-box {
		&-right {
			padding: 16rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 4rpx 0px rgba(52, 87, 53, 0.05);
			border-radius: 15rpx;
		}

		&-right-item {
			padding: 10rpx;
		}

		.dateactive {
			border-radius: 10rpx;
			padding: 10rpx;
			color: #FFFFFF;
			background-color: #01E305;
		}
	}

	.data-card {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 16rpx;

		&-item {
			width: 30%;
		}

		.data-card-item-bottom {
			padding: 16rpx 0;
			width: 100%;
			border-bottom: 3px solid #979797;
		}

		&-left {
			image {
				width: 60rpx;
				height: 60rpx;
			}

			.data-card-left-tab {
				padding: 11rpx;
				background: #E9F0F6;
				border-radius: 6rpx;

				view {
					padding: 2rpx 6rpx;
				}
			}

			.active {
				border-radius: 6rpx;
				background-color: #6EF2FF;
			}
		}

		&-right {
			.data-card-right-item {
				margin-bottom: 14rpx;

			}

			.cD3312F {
				color: #D3312F;
			}

			.cF8B437 {
				color: #F8B437;
			}
		}
	}

	.table-box {
		.td {
			width: 33%;
			text-align: center;
		}
	}
	.yongjin-item{
		width: 50%;
		text-align: center;
	}
	.c69 {
		color: #696969;
	}
</style>